<template>
  <view class="page flex-col">
    <view class="section_1 flex-col">
      <view class="box_3 flex-row justify-between">
        <view class="block_1 flex-col" v-for="(item, index) in BenegitsList" :key="index">
          <text class="text_3">我的收益</text>
          <view class="text-wrapper_1 flex-row justify-between">
            <text class="text_4">￥</text>
            <text class="text_5">{{ item.balance }}</text>
          </view>
        </view>
        <view class="text-wrapper_2 flex-col">
          <button @click="open" class="text_6">提现</button>
        </view>
      </view>
      <text class="text_7">提现记录</text>
    </view>
    <view class="section_2 flex-col" v-for="(item, index) in withdrawalRecordsList" :key="index" style="">
     <view class="content" style="">
     	<view class="text-wrapper_3 flex-row justify-between">
     	  <text class="text_8">名称</text>
     	  <text class="text_9">{{item.nickName}}</text> 
     	</view>
     	<view class="text-wrapper_4 flex-row justify-between">
     	  <text class="text_10">手机号码</text>
     	  <text class="text_11">{{item.phoneNumber }}</text>
     	</view>
     	<view class="text-wrapper_5 flex-row justify-between">
     	  <text class="text_12">账户名称</text>
     	  <text class="text_13">{{ item.accountName }}</text>
     	</view>
     	<view class="text-wrapper_6 flex-row justify-between">
     	  <text class="text_14">账户</text>
     	  <text class="text_15">{{  item.account  }}</text>
     	</view>
     	<view class="text-wrapper_7 flex-row justify-between">
     	  <text class="text_16">开户银行</text>
     	  <text class="text_17">{{ item.openingBank }}</text>
     	</view>
     	<view class="text-wrapper_8 flex-row justify-between">
     	  <text class="text_18">金额</text>
     	  <text class="text_19">￥{{ item.amount }}</text>
     	</view>
     	<view class="text-wrapper_9 flex-row justify-between">
     	  <text class="text_20">银行分行</text>
     	  <text class="text_21">{{ item.bankBranch }}</text>
     	</view>
     	<view class="text-wrapper_10 flex-row justify-between">
     	  <text class="text_22">账户类型</text>
     	  <text class="text_23">{{ item.accountType === '0' ? '银行卡' : '支付宝' }}</text>
     	</view>
     </view>
    </view>
	<view class="message">
		<!-- 关闭显示弹框 -->
		<view v-show="showPopup" class="mask" @click="close"></view>
		<!-- 遮罩层弹框内容 -->
		 <view v-show="showPopup" class="popup">
			 <view class="content">
				 <!-- 输入框 -->
				<view class="input-item" style="width: 280px; display: flex; flex-wrap: wrap; ">
					<text class="text_1" style="font-size: 18px;">提现金额：</text>
					<view class="text-wrapper_1 flex-row justify-between">
						<text 
						class="text_2" 
						style="color: #000;font-size: 40px;position: relative; top: 55px;left: -35px;">￥</text>
						<input 
						v-model="inputValue" 
						class="text_2"
						style="border-bottom: 1px solid #000; border-radius: 3px; width: 260px;margin-left: 40px;height: 50px;"/>
					</view>
				</view>
				
				<view class="checked-item">
				  <text style="color: #999;">提现类型:</text>
				  <view style="display: flex; align-items: center;">
				    <view v-for="(item,index) in range" :key="index"
				          @click="changeLable(index)"
				          style="margin-left: 30rpx; display: flex;align-items: center;">
				      <view :class="[selectedAccountType==item.value ? 'radio checked' : 'radio']"></view>
				      <view style="margin-left: 10rpx; white-space: pre-wrap;">{{item.label}}</view>
				    </view>
				  </view>
				</view>
				<!-- 原来的 -->
				<!-- <view class="checked-item">
				  <text style="color: #999;">提现类型:</text>
				  <view style="display: flex; align-items: center;">
				    <view v-for="(item,index) in range" :key='index' 
				          @click="changeLable(index)"
				          style="margin-left: 30rpx; display: flex;align-items: center;">
				      <view :class="[selectedAccountType==item.value ? 'radio checked' : 'radio']"></view>
				      <view style="margin-left: 10rpx; white-space: pre-wrap;">{{item.label}}</view>
				    </view>
				  </view>
				</view> -->
				<view style="display: flex;margin-top: 30rpx; z-index: 999;">
					<text style="color: #999;">提现至：</text>
					<view class="">
						<picker mode="selector" range-key="account" :range="list" @change="changePicker">
							<input :disabled="true" style="" :value="pickerObj&&pickerObj.account"
								placeholder="请选择提现类型" class="input" style=" border-radius: 3px;" />
						</picker>
					</view>
				</view>
				<view class="btn-item" style="display: flex;">
					<button @click="close" class="btn-close">关闭</button>
					<button @click="submit()"  class="btn-submit">提交</button>
				</view>
			 </view>
		</view>
	</view>
  </view>
</template>
<script>
	import {
		Benegits,
		getColletion,
		withdrawalRecords,
		addWithdraw,
		myBank,
		userID
	} from "../../../api/system/user.js";
	import user from "../../../store/modules/user.js";

	export default {
		data() {
			return {
				pickerObj:{},
				userId: "", 					//保存动态的userId
				BenegitsList: [], 				//查看我的收益
				withdrawalRecordsList: [], 		//查看我的缴费记录
				showPopup: false, 				// 控制弹窗显示的变量
				inputValue: "",                 // 输入框的值
				selectedAccountType: "",        // 选中的账户类型，默认为银行卡
				selectedAccountTypeLable: '',
				range: [
					{value: "1",label: "银行卡"},
					{value: "0",label: "支付宝"}
				],
				list:[],
				accountList: [], // 用于保存支付宝或银行卡信息的数组
				accountType: '' ,//存储类型 0支付宝1银行卡 
				selectedAccountType: '', // 选中的账户类型
				  alipayChecked: false,    // 支付宝选中状态
				  bankCardChecked: false,  // 银行卡选中状态
			};
		},
		created(){
			this.showPopup = false;
		},
		onLoad() {
			this.myUser();
			this.myBenegits();
			this.myWithdraw();

			this.showPopup = localStorage.getItem("showPopup") === "true"; // 读取localStorage的值
		},
		methods: {
			changePicker(e){
				this.pickerObj=this.list[e.detail.value]
				console.log(this.pickerObj)
			},
			async getColletion(accountType) {
				const userId = await this.myUser();
				getColletion({
					userId,
					accountType
				}).then(res=>{
					this.list=res
					console.log(this.list)
				})
			},
			changeLable(e) {

				// this.selectedAccountType = this.range[e].value
				// this.selectedAccountTypeLable = this.range[e].label
				// this.getColletion(this.selectedAccountType)
				 this.selectedAccountType = this.range[e].value;
				  this.selectedAccountTypeLable = this.range[e].label;
				
				  this.getColletion(this.selectedAccountType);
			},
			// 获取信息
			async myUser() {
				try {
					console.log("调用 userID");
					const userId = await userID();
					console.log("获取信息成功", userId);
					return userId;
				} catch (error) {
					console.log("获取信息失败", error);
				}
			},
			async change(item) {
				const userId = await this.myUser();
				const accountType = item.value;
				myBank(userId, accountType).then(res => {
					console.log('判断支付类型', res);
					res.accountType = this.accountType
				})
				//   this.selectedAccountType = accountType;

				//   const returnedAccountType = await this.myBank(userId, accountType); // 调用myBank() 并获取返回的 returnedAccountType 值
				//   this.returnedAccountType = returnedAccountType;

				//   console.log("判断支付类型", returnedAccountType === "0" ? "银行卡" : "支付宝");
			},
			// async myBank(userId, accountType) {
			//   try {
			//      const res = await myBank(userId, accountType);
			//      console.log("判断支付类型", res);
			//      const returnedAccountType = res.accountType;

			//      return returnedAccountType; // 返回 returnedAccountType 值
			//    } catch (error) {
			//      console.log("获取银行信息失败", error);
			//      return null; // 返回 null 或其他适当的错误值，表示获取银行信息失败
			//    }
			// },
			// 点击提现（包括金额，方式）
			async submit() {
				 this.close(); // 关闭提现弹框
				const userId = await this.myUser(); // 使用 await 等待 myUser() 返回的结果
				const amount = this.inputValue;
				const accountType = this.pickerObj.id;
				addWithdraw(amount, accountType, userId).then((res) => {
					this.myBenegits();
					 uni.showToast({ // 显示上传成功提示
					        icon: 'success',
					        mask: true,
					        title: '提现成功',
					        position: 'center'
					      });
					  // setTimeout(() => {
					  //       uni.navigateBack({ // 延迟一段时间后返回上一页
					  //         delta: 1
					  //       });
					  //     }, 2000); // 2秒后返回上一页
				});
			},
			async myBenegits() {
				const userId = await this.myUser(); // 使用 await 等待 myUser() 返回的结果
				Benegits(userId).then((res) => {
					console.log("查看我的收益成功", res);
					this.BenegitsList = res;
				});
				
			},
			async myWithdraw() {
				const userId = await this.myUser(); // 使用 await 等待 myUser() 返回的结果
				withdrawalRecords(userId).then((res) => {
					console.log("提现记录成功", res);
					this.withdrawalRecordsList = res;
				});
			},
			open() {
			   if (!this.showPopup) {
			      this.showPopup = true;
			      this.showPopupDefault = true; // 设置默认的弹窗显示状态为true
			      localStorage.setItem("showPopup", true);
			    }
			},
			// 关闭弹框
			close() {
						 if (this.showPopup) {
						    this.showPopup = false; // 更新showPopup的值为false，隐藏弹窗
						  }
					}
		},
	};
</script>

<style lang="scss">
	.checked-item .radio {
	  width: 20px;
	  height: 20px;
	  border-radius: 50%;
	  border: 1px solid #999;
	  background-color: #fff;
	}
	
	.checked-item .radio.checked {
	  background-color: #ff0000;
	}
	
	.checked-item .radio.checked:after {
	  content: "";
	  display: block;
	  width: 12px;
	  height: 12px;
	  margin: 3px;
	  border-radius: 50%;
	  background-color: #fff;
	}
	.message{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		.mask {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.5);
		  z-index: 997;
		}
		.popup {
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  background-color: #fff;
		  border-radius: 8px;
		  padding: 16px;
		  z-index: 998;
				.content {
				  margin-bottom: 16px;
				  .input-item{
					        .text_1 {
					           overflow-wrap: break-word;
					           color: rgba(34, 34, 34, 1);
					           font-size: 15px;
					           font-weight: NaN;
					           text-align: left;
					           white-space: nowrap;
					           line-height: 21px;
					           margin-right: 235px;
					         }
					         .text-wrapper_1 {
					           width: 100px;
					           margin: -18px 195px 0 0;
					           .text_2 {
					             overflow-wrap: break-word;
					             color: rgba(34, 34, 34, 1);
					             font-size: 25px;
					             font-family: PingFangSC-Semibold;
					             font-weight: 600;
					             text-align: left;
					             white-space: nowrap;
					             line-height: 36px;
					             margin-top: 5px;
								 margin-left: 10px;
								 padding: 2px 15px;
					           }
					           .text_3 {
					             overflow-wrap: break-word;
					             color: rgba(34, 34, 34, 1);
					             font-size: 32px;
					             font-family: PingFangSC-Semibold;
					             font-weight: 600;
					             text-align: left;
					             white-space: nowrap;
					             line-height: 45px;
								 
					           }
					         }
				  }
				  .checked-item{
					 display: flex;
					 margin: 30px 0;
					 font-size: 16px;
				  }
				  .btn-item{
						position: relative;
						left: 15px;
						bottom: -20px;
					  .btn-close{
					  	margin: 25px 0;
					  	display: inline;
					  	width: 120px;
					  	border-radius: 30px;
					  }
					  .btn-submit{
					  	display: inline;
					  	width: 120px;
					  	height: 50px;
					  	border-radius: 30px;
					  	margin: 25px 28px;
					  	background-color: #29A7F4;
					  	color: #fff;
					  }
				  }
				}
		}
	}
.page {
  background-color: rgba(246, 247, 251, 1);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .section_1 {
    // padding: 14px 14px 11px 16px;
    .box_1 {
      width: 345px;
      .text_1 {
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 1);
        font-size: 15px;
        letter-spacing: -0.3333333432674408px;
        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        font-weight: NaN;
        text-align: center;
        white-space: nowrap;
        line-height: 18px;
      }
      .image_1 {
        width: 67px;
        height: 11px;
        margin: 3px 0 4px 0;
      }
    }
    .box_2 {
      width: 188px;
      margin: 23px 157px 0 0;
      .thumbnail_1 {
        width: 17px;
        height: 17px;
        margin: 3px 0 2px 0;
      }
      .text_2 {
        overflow-wrap: break-word;
        color: rgba(34, 34, 34, 1);
        font-size: 16px;
        font-weight: NaN;
        text-align: center;
        white-space: nowrap;
        line-height: 22px;
      }
    }
    .box_3 {
      background: url(../../../static/order-images/bg_wallet@2x.png)
        100% no-repeat;
      background-size: 100% 100%;
      // margin: 21px 6px 0 4px;
	  margin: 10px;
      padding: 31px 20px 32px 20px;
	  display: flex;
	  justify-content: space-between;
      .block_1 {
        .text_3 {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 15px;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 21px;
          margin-right: 52px;
        }
        .text-wrapper_1 {
          width: 112px;
          .text_4 {
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 15px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            line-height: 21px;
            margin-top: 11px;
          }
          .text_5 {
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 25px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            line-height: 36px;
          }
        }
      }
      .text-wrapper_2 {
		  .message{
			 .popup{
				 .content{
					 
				 }
			 }
		  }
        .text_6 {
			padding: 8px 30px;
			border-radius: 30px;
			display: inline;
			background-color: transparent;
			color: white;
			border: 1px solid white;
        }
      }
    }
    .text_7 {
      overflow-wrap: break-word;
      color: rgba(34, 34, 34, 1);
      font-size: 16px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
      line-height: 22px;
      margin: 20px 277px 0 4px;
    }
  }
  .section_2 {
    // background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    align-self: center;
    margin-top: -1px;
    width: 335px;
    padding: 15px 15px 15px 35px;
    .content{
		background-color: #fff;
		width: 350px;
		height: 250px;
		border-radius: 20px;
		position: relative;
		left: -5px;
		padding: 10px 8px;
		
		.text-wrapper_3 {
				display: flex;
				justify-content: space-between;
		    width: 305px;
		    .text_8 {
		      overflow-wrap: break-word;
		      color: rgba(34, 34, 34, 1);
		      font-size: 15px;
		      font-family: PingFangSC-Semibold;
		      font-weight: 600;
		      text-align: left;
		      white-space: nowrap;
		      line-height: 21px;
		    }
		    .text_9 {
		      overflow-wrap: break-word;
		      color: rgba(34, 34, 34, 1);
		      font-size: 15px;
		      font-family: PingFangSC-Semibold;
		      font-weight: 600;
		      text-align: right;
		      white-space: nowrap;
		      line-height: 21px;
		    }
		  }
		  .text-wrapper_4 {
				display: flex;
				justify-content: space-between;
		    width: 305px;
		    margin-top: 8px;
		    .text_10 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: left;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		    .text_11 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: right;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		  }
		  .text-wrapper_5 {
				display: flex;
				justify-content: space-between;
		    width: 305px;
		    margin-top: 8px;
		    .text_12 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: left;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		    .text_13 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: right;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		  }
		  .text-wrapper_6 {
				display: flex;
				justify-content: space-between;
		    width: 305px;
		    margin-top: 8px;
		    .text_14 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: left;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		    .text_15 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: right;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		  }
		  .text-wrapper_7 {
				display: flex;
				justify-content: space-between;
		    width: 305px;
		    margin-top: 8px;
		    .text_16 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: left;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		    .text_17 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: right;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		  }
		  .text-wrapper_8 {
				display: flex;
				justify-content: space-between;
		    width: 305px;
		    margin-top: 8px;
		    .text_18 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: left;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		    .text_19 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: right;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		  }
		  .text-wrapper_9 {
				display: flex;
				justify-content: space-between;
		    width: 305px;
		    margin-top: 8px;
		    .text_20 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: left;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		    .text_21 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: right;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		  }
		  .text-wrapper_10 {
				display: flex;
				justify-content: space-between;
		    width: 305px;
		    margin-top: 8px;
		    .text_22 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: left;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		    .text_23 {
		      overflow-wrap: break-word;
		      color: rgba(102, 102, 102, 1);
		      font-size: 14px;
		      font-weight: NaN;
		      text-align: right;
		      white-space: nowrap;
		      line-height: 20px;
		    }
		  }
		}
	}
}
</style>